<template>
  <div class="recommond">
    <h2>编辑推荐</h2>
    <div class="cards">
      <song-sheet-card v-for="item in songSheets" :key="item.id" :item="item" @click.native="openSongCheet(item.id)">
      </song-sheet-card>
    </div>

    <h2>最新音乐</h2>
    <div class="new-song">
      <single-song v-for="item in newSongs" :key="item.id" :item="item.song" :song="song" :paused="paused"
        @click.native="$emit('change-current-song', { song: item.song, songList: newSongs })">
        <template #ar-al>
          <span v-for="(ar, i) in item.song.artists" :key="i">{{ ar.name + ((i == item.song.artists.length - 1) ? ''
            : '/')
          }}</span>
          <span> - {{ item.song.album.name }}</span>
        </template>
      </single-song>
    </div>

    <!-- <div class="down-load-botttom">
      <div class="bt-logo"></div>
      <div class="btn-open">打开APP，发现更多好音乐 ></div>
      <p class="copyright">网易公司版权所有©1997-2022-杭州乐读科技有限公司运营</p>
    </div> -->
  </div>
</template>

<script>
import SongSheetCard from '@/components/SongSheetCard.vue'
import SingleSong from '@/components/SingleSong.vue'
export default {
  props: ['song', 'paused'],

  data() {
    return {
      songSheets: [],
      newSongs: [],
    }
  },
  components: {
    SongSheetCard,
    SingleSong,
  },

  created() {
    this.axios.get('/personalized?limit=6').then((res) => {
      // console.log(res)
      this.songSheets = res.data.result
      // console.log(this.songSheets)
    })
    this.axios.get('/personalized/newsong').then((res) => {
      // console.log(res.data.result)
      this.newSongs = res.data.result
    })
  },

  methods: {
    openSongCheet(id) {
      this.$router.push(
        {
          path: 'play',
          query: {
            id: id
          }
        }
      )
    },


    test() {
      console.log(87)
    }
  }


}

</script>

<style lang="scss" scoped>
$red: #d33a31;


.recommond {
  h2 {
    position: relative;
    // margin-bottom: 14px;
    padding: 20px 0 0 9px;
    font-weight: 500;
    font-size: 17px;

    &::after {
      content: ' ';
      position: absolute;
      left: 0;
      top: 50%;
      width: 3px;
      height: 16px;
      background-color: $red;

    }
  }

  .cards {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }

  .down-load-botttom {
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: center;
    height: 200px;
    background-image: url('../../images/recommend-bottom.png');
    background-size: contain;

    .bt-logo {
      width: 230px;
      height: 43px;
      margin-top: 63px;
      background: url('../../images/s.svg') no-repeat;
      background-size: contain;
    }

    .btn-open {
      width: 300px;
      height: 40px;
      margin: 15px 0 5px;
      border: 1px solid $red;
      border-radius: 20px;
      color: $red;
      font-size: 16px;
      text-align: center;
      line-height: 40px;
    }

    .copyright {
      color: #888;
      font-size: 12px;
    }
  }
}
</style>
